<template>
	<div class="main">
		<div class="main-right">
			<div class="main-title f18">文件下载管理</div>
			<div class="main-buttom" v-for="(item, index) in list" :key="item.id">
				<div class="main-content" v-auth="['knowledge:kbDownloadConf:edit']">
					<div>
						{{ item.name }}
					</div>
					<el-tooltip class="main-icon" effect="dark" :content="item.remark" placement="top" :offset="10">
						<el-icon><InfoFilled /></el-icon>
					</el-tooltip>
				</div>
				<div class="main-content">
					<el-switch
						v-model="item.status"
						:active-value="qiyong"
						:inactive-value="jinyong"
						@change="changeSwitch(item)"
						v-auth="['knowledge:kbDownloadConf:edit']"
					/>
					<span v-auth="['knowledge:kbDownloadConf:edit']" v-if="item.status == '1'" class="f14 c60 ml15"
						>启用</span
					>
					<span v-auth="['knowledge:kbDownloadConf:edit']" v-else class="f14 c60 ml15">未启用</span>
				</div>
				<span v-auth="['knowledge:kbDownloadConf:edit']" class="f12 prompt">{{ prompt[index] }}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ElMessage, ElMessageBox, ElNotification } from "element-plus"

const list = ref([])
const qiyong = ref(1)
const jinyong = ref(2)
const prompt = ref([
	"开启源文件下载后，用户下载则均为文件上传的默认格式",
	"开启下载水印后，则用户下载的文件均会带着水印效果",
])
async function created() {
	const { records } = await getAxios(`/knowledge/kbDownloadConf/page`)
	list.value = records
}
created()

const changeSwitch = async val => {
	try {
		await postAxios(`/knowledge/kbDownloadConf/edit`, val)
		if (val.status == 1) {
			ElNotification({
				message: "启用成功",
				type: "success",
			})
		} else {
			ElNotification({
				message: "已停用",
				type: "error",
			})
		}
	} catch (error) {
		if (val.status == 1) {
			val.status = 2
		} else {
			val.status = 1
		}
		ElMessage.error(error)
	}
}
</script>

<style lang="scss" scoped>
.main {
	height: 100%;
	background-color: #f8f8f8;
	.main-right {
		margin: 20px;
		background-color: #fff;
		height: 100%;
		padding: 30px;
		.main-buttom {
			position: relative;
			display: flex;
			margin-top: 30px;
			// justify-content: center;
			// padding-top: 30px;
			padding-left: 20px;
			.main-content {
				line-height: 2.3;
				height: 50px;
				width: 100px;
				display: flex;
			}
			.prompt {
				position: absolute;
				top: 40px;
				left: 20px;
				color: #ccc;
			}
		}
	}
}
:deep(.el-tooltip__trigger) {
	margin-left: 5px;
	padding-top: 16px !important;
}
</style>
